<template>
    <view class="container">
      <view class="logo-area">
        <image src="/static/images/logo.png" mode="aspectFit" class="logo"></image>
        <view class="title">驾校报名系统</view>
      </view>
      
      <view class="form-container">
        <view class="form-group">
          <input 
            class="input" 
            type="text" 
            v-model="form.username" 
            placeholder="请输入用户名/手机号" 
          />
        </view>
        
        <view class="form-group">
          <input 
            class="input" 
            :type="showPassword ? 'text' : 'password'" 
            v-model="form.password" 
            placeholder="请输入密码" 
          />
          <text 
            class="password-toggle" 
            @click="showPassword = !showPassword"
          >
            {{ showPassword ? '隐藏' : '显示' }}
          </text>
        </view>
        
        <view class="form-group">
          <button 
            class="btn-login" 
            :loading="loading" 
            :disabled="loading" 
            @click="handleLogin"
          >
            登录
          </button>
        </view>
        
        <view class="links">
          <text class="link" @click="navigateTo('/pages/register/register')">注册账号</text>
          <text class="link" @click="navigateTo('/pages/login/forget-password')">忘记密码</text>
        </view>
      </view>
      
      <view class="other-login">
        <view class="divider">
          <text class="divider-text">其他登录方式</text>
        </view>
        
        <view class="social-login">
          <view class="social-item" @click="socialLogin('wechat')">
            <text class="iconfont icon-wechat"></text>
          </view>
          <view class="social-item" @click="socialLogin('alipay')">
            <text class="iconfont icon-alipay"></text>
          </view>
          <view class="social-item" @click="socialLogin('qq')">
            <text class="iconfont icon-qq"></text>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  import { mapActions } from 'vuex';
  import { isPhone, isEmpty } from '@/utils/validator';
  
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        showPassword: false,
        loading: false
      };
    },
    methods: {
      ...mapActions('user', [
        'login'
      ]),
      navigateTo(url) {
        uni.navigateTo({
          url
        });
      },
      handleLogin() {
        // 表单验证
        if (isEmpty(this.form.username)) {
          this.showToast('请输入用户名/手机号');
          return;
        }
        
        if (isEmpty(this.form.password)) {
          this.showToast('请输入密码');
          return;
        }
        
        this.loading = true;
        
        // 登录
        this.login(this.form)
          .then(() => {
            this.showToast('登录成功', 'success');
            // 延迟跳转，让用户看到提示
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/index'
              });
            }, 1500);
          })
          .catch(err => {
            // Enhanced error logging
            console.error('Login failed:', err); // Log the full error object
            this.showToast(err?.message || err?.errMsg || '登录失败，请稍后重试'); // Try to get a more specific message
          })
          .finally(() => {
            this.loading = false;
          });
      },
      socialLogin(type) {
        // 根据不同的社交平台调用不同的登录方法
        switch (type) {
          case 'wechat':
            this.showToast('微信登录暂未开放');
            break;
          case 'alipay':
            this.showToast('支付宝登录暂未开放');
            break;
          case 'qq':
            this.showToast('QQ登录暂未开放');
            break;
          default:
            break;
        }
      }
    }
  };
  </script>
  
  <style lang="scss">
  .container {
    padding: 40rpx;
    height: 100vh;
  }
  
  .logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80rpx;
    margin-bottom: 60rpx;
  }
  
  .logo {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  
  .form-container {
    margin-bottom: 60rpx;
  }
  
  .form-group {
    position: relative;
    margin-bottom: 30rpx;
  }
  
  .input {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 10rpx;
    box-sizing: border-box;
  }
  
  .password-toggle {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    font-size: 28rpx;
    color: #999;
  }
  
  .btn-login {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    color: #fff;
    background-color: #3c8dbc;
    border-radius: 10rpx;
    margin-top: 50rpx;
  }
  
  .links {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    color: #3c8dbc;
    margin-top: 30rpx;
  }
  
  .link {
    padding: 10rpx;
  }
  
  .other-login {
    margin-top: 80rpx;
  }
  
  .divider {
    position: relative;
    text-align: center;
    margin-bottom: 40rpx;
  }
  
  .divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    z-index: -1;
  }
  
  .divider-text {
    display: inline-block;
    padding: 0 20rpx;
    background-color: #f8f8f8;
    font-size: 28rpx;
    color: #999;
  }
  
  .social-login {
    display: flex;
    justify-content: center;
  }
  
  .social-item {
    width: 100rpx;
    height: 100rpx;
    margin: 0 30rpx;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }
  
  .iconfont {
    font-size: 50rpx;
  }
  
  .icon-wechat {
    color: #09bb07;
  }
  
  .icon-alipay {
    color: #00a0e9;
  }
  
  .icon-qq {
    color: #12b7f5;
  }
  </style>